<!DOCTYPE html>
<html lang="zh-CN" data-i18n-title="system.title">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>xxpay 聚合支付代理商系统</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        .header h1 {
            margin: 0 0 10px 0;
            font-size: 28px;
        }
        .header p {
            margin: 0;
            opacity: 0.9;
        }
        .section {
            padding: 30px;
            border-bottom: 1px solid #eee;
        }
        .section:last-child {
            border-bottom: none;
        }
        .section h3 {
            margin: 0 0 20px 0;
            color: #333;
            font-size: 18px;
        }
        .lang-switcher {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        .lang-btn {
            padding: 8px 16px;
            background: #667eea;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            transition: background 0.3s;
        }
        .lang-btn:hover {
            background: #5a6fd8;
        }
        .lang-btn.active {
            background: #4c63d2;
        }
        .info-box {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 4px;
            margin: 15px 0;
            border-left: 4px solid #667eea;
        }
        .test-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        .test-card {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 6px;
            border: 1px solid #e9ecef;
        }
        .test-card h4 {
            margin: 0 0 15px 0;
            color: #495057;
        }
        .btn-group {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .btn {
            padding: 6px 12px;
            background: #6c757d;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
        }
        .btn:hover {
            background: #5a6268;
        }
        .status-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .status-item {
            padding: 8px 12px;
            background: #e9ecef;
            border-radius: 3px;
            font-size: 14px;
        }
        .api-test {
            margin-top: 20px;
        }
        .api-result {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 15px;
            margin-top: 10px;
            font-family: monospace;
            font-size: 12px;
            white-space: pre-wrap;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1 data-i18n="system.title">xxpay 聚合支付代理商系统</h1>
            <p data-i18n="system.welcome">欢迎使用代理商系统</p>
        </div>

        <!-- 语言切换器 -->
        <div class="section">
            <h3>语言切换 / Language Switch</h3>
            <div class="lang-switcher">
                <a href="javascript:;" class="lang-btn" data-lang="zh_CN">中文</a>
                <a href="javascript:;" class="lang-btn" data-lang="en_US">English</a>
            </div>
            <div class="info-box">
                <strong>当前语言 / Current Language:</strong> <span id="current-lang">zh_CN</span><br>
                <strong>浏览器语言 / Browser Language:</strong> <span id="browser-lang">-</span>
            </div>
        </div>

        <!-- 基本文本测试 -->
        <div class="section">
            <h3 data-i18n="test.basic.text">基本文本测试</h3>
            <div class="test-grid">
                <div class="test-card">
                    <h4 data-i18n="test.buttons">按钮测试</h4>
                    <div class="btn-group">
                        <button class="btn" data-i18n="btn.save">保存</button>
                        <button class="btn" data-i18n="btn.cancel">取消</button>
                        <button class="btn" data-i18n="btn.delete">删除</button>
                        <button class="btn" data-i18n="btn.search">搜索</button>
                        <button class="btn" data-i18n="btn.export">导出</button>
                    </div>
                </div>
                
                <div class="test-card">
                    <h4 data-i18n="test.status">状态测试</h4>
                    <div class="status-list">
                        <div class="status-item" data-i18n="status.enabled">已启用</div>
                        <div class="status-item" data-i18n="status.disabled">已禁用</div>
                        <div class="status-item" data-i18n="status.pending">待处理</div>
                        <div class="status-item" data-i18n="status.processing">处理中</div>
                        <div class="status-item" data-i18n="status.success">成功</div>
                        <div class="status-item" data-i18n="status.failed">失败</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- API测试 -->
        <div class="section">
            <h3>API 测试 / API Test</h3>
            <div class="api-test">
                <button class="btn" onclick="testCurrentLanguage()">获取当前语言 / Get Current Language</button>
                <button class="btn" onclick="testSupportedLanguages()">获取支持语言 / Get Supported Languages</button>
                <button class="btn" onclick="testGetMessage()">获取消息 / Get Message</button>
                <div id="api-result" class="api-result"></div>
            </div>
        </div>
    </div>

    <!-- 引入国际化脚本 -->
    <script src="/static/i18n/i18n.js"></script>
    <script src="/static/i18n/zh_CN.js"></script>
    <script src="/static/i18n/en_US.js"></script>

    <!-- 简化的国际化实现 -->
    <script>
        // 简化的国际化实现
        var SimpleI18n = {
            locale: 'zh_CN',
            messages: {
                'zh_CN': {
                    'system.title': 'xxpay 聚合支付代理商系统',
                    'system.welcome': '欢迎使用代理商系统',
                    'test.basic.text': '基本文本测试',
                    'test.buttons': '按钮测试',
                    'test.status': '状态测试',
                    'btn.save': '保存',
                    'btn.cancel': '取消',
                    'btn.delete': '删除',
                    'btn.search': '搜索',
                    'btn.export': '导出',
                    'status.enabled': '已启用',
                    'status.disabled': '已禁用',
                    'status.pending': '待处理',
                    'status.processing': '处理中',
                    'status.success': '成功',
                    'status.failed': '失败'
                },
                'en_US': {
                    'system.title': 'xxpay Payment Agent System',
                    'system.welcome': 'Welcome to Agent System',
                    'test.basic.text': 'Basic Text Test',
                    'test.buttons': 'Button Test',
                    'test.status': 'Status Test',
                    'btn.save': 'Save',
                    'btn.cancel': 'Cancel',
                    'btn.delete': 'Delete',
                    'btn.search': 'Search',
                    'btn.export': 'Export',
                    'status.enabled': 'Enabled',
                    'status.disabled': 'Disabled',
                    'status.pending': 'Pending',
                    'status.processing': 'Processing',
                    'status.success': 'Success',
                    'status.failed': 'Failed'
                }
            },
            
            t: function(key) {
                return this.messages[this.locale][key] || key;
            },
            
            setLocale: function(locale) {
                this.locale = locale;
                this.updatePage();
                document.getElementById('current-lang').textContent = locale;
            },
            
            updatePage: function() {
                var elements = document.querySelectorAll('[data-i18n]');
                for (var i = 0; i < elements.length; i++) {
                    var element = elements[i];
                    var key = element.getAttribute('data-i18n');
                    element.textContent = this.t(key);
                }
                
                // 更新页面标题
                var titleKey = document.documentElement.getAttribute('data-i18n-title');
                if (titleKey) {
                    document.title = this.t(titleKey);
                }
            }
        };

        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 显示浏览器语言
            document.getElementById('browser-lang').textContent = navigator.language || 'unknown';
            
            // 绑定语言切换事件
            var langBtns = document.querySelectorAll('.lang-btn');
            for (var i = 0; i < langBtns.length; i++) {
                langBtns[i].addEventListener('click', function() {
                    var lang = this.getAttribute('data-lang');
                    SimpleI18n.setLocale(lang);
                    
                    // 更新按钮状态
                    langBtns.forEach(function(btn) {
                        btn.classList.remove('active');
                    });
                    this.classList.add('active');
                    
                    // 调用后端API切换语言
                    switchLanguageAPI(lang);
                });
            }
            
            // 初始化页面
            SimpleI18n.updatePage();
        });

        // API测试函数
        function testCurrentLanguage() {
            fetch('/api/i18n/current')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('api-result').textContent = JSON.stringify(data, null, 2);
                })
                .catch(error => {
                    document.getElementById('api-result').textContent = 'Error: ' + error.message;
                });
        }

        function testSupportedLanguages() {
            fetch('/api/i18n/languages')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('api-result').textContent = JSON.stringify(data, null, 2);
                })
                .catch(error => {
                    document.getElementById('api-result').textContent = 'Error: ' + error.message;
                });
        }

        function testGetMessage() {
            fetch('/api/i18n/message?key=operation.success')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('api-result').textContent = JSON.stringify(data, null, 2);
                })
                .catch(error => {
                    document.getElementById('api-result').textContent = 'Error: ' + error.message;
                });
        }

        function switchLanguageAPI(lang) {
            fetch('/api/i18n/switch', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'lang=' + encodeURIComponent(lang)
            })
            .then(response => response.json())
            .then(data => {
                console.log('Language switched:', data);
            })
            .catch(error => {
                console.error('Language switch failed:', error);
            });
        }
    </script>
</body>
</html>
